<template>
  <div>
    <div class="content">
      <div class="groupService_head_content">
        <div class="head_left_content">
          <div><img src="http://rzico.oss-cn-shenzhen.aliyuncs.com/img/hot.png" style="width: 20px;height: 20px;"></div>
          <div class="head_text_content">
            <span class="head_title">{{name}}</span>
            <div class="line"></div>
            <span class="head_subTitle">{{shareDescr}}</span>
          </div>
        </div>
        <div class="head_right_content">
          <div style="line-height:15px"><span class="all_text">更多</span></div>
          <span class="iconfont icon">&#xe61f; </span>
        </div>
      </div>
      <div class="hidden_content">
        <div class="product_list">

          <div class="product_item" v-for="item in products">
            <div class="product_img">
              <img :src="item.thumbnail" style="width:115px;height:115px"></img>
            </div>
            <div class="product_info_conteny">
              <div class="product_name_content"><span class="product_name">{{item.name}}</span></div>
              <div class="product_money_content">
                <div class="subsidy_content">
                  <span style="color:white;font-size:10px">补贴</span>
                </div>
                <span style="font-size:15px;color:#d03629;margin-left:10px">¥</span>
                <span style="font-size:15px;color:#d03629">{{item.point/100}}</span>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
  import  {list} from '@/api/groupBuy'
  import  {list as pageList} from '@/api/wxPage'
  import utils from '../../../../utils/utils'
  export default {
    name: 'groupService',
    data(){
      return{
        shareDescr:'',
        name:'',
        tagIds:[],
        products:[],
        pages:[]
      }
    },
    props:[
      'content'
    ],
    created() {
      this.loadPage()
      this.loadProduct()

    },
    methods:{
      loadPage(){
        if (!utils.isNull(this.content.tagids)) {
          this.tagIds = this.content.tagids.split(',');
          for (var i = 0; i <  this.tagIds.length; i++) {
            this.tagIds[i] = parseInt(this.tagIds[i])
          }
        }
        let params=new URLSearchParams()
        for (var i = 0; i < this.tagIds.length; i++) {
          params.append('tagId',this.tagIds[i])
        }
        pageList(params).then(res=>{
            this.pages=res.data.data
          this.name=res.data.data[0].name
          this.shareDescr=res.data.data[0].shareDescr
        })
      },
      loadProduct(){

        list().then(res=>{
          res.data.data.forEach(item=>{
            if (utils.isNull(item.logo)){
              item.logo='http://cdnx.hulu.fj.cn/00/4B/rBD_P13d876ATFO4AAT07C99LBw961.jpg'
            }
            if (utils.isNull(item.name)){
              item.name='启鉴德化薄胎白瓷手绘反口品茗杯系列10虚怀若谷主人杯单杯'
            }
            if (utils.isNull(item.point)){
              item.point=300
            }
          })
          this.products=res.data.data
        })
      }
    }
  }
</script>

<style scoped>

  .content{
    padding:10px;
    width: 355px;
    border-radius: 8px;
    background-color: white;
    margin-left: 10px;
    box-sizing: border-box;
  }
  .groupService_head_content{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .hot_icon{
    font-size: 17.5px;
    color: #fd5353;
  }
  .head_left_content{
    display: flex;
    flex-direction: row;
  }
  .head_text_content{
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    margin-left: 10px;
  }
  .head_title{
    font-size: 18px;
    font-weight: 500;
  }
  .head_subTitle{
    font-size: 14px;
    color: rgba(0 ,0 , 0,0.3);
  }
  .line{
    height: 17.5px;
    margin-left: 10px;
    margin-right: 10px;
    width: 2px;
    background-color: rgba(0 ,0 , 0,0.1);
  }
  .head_right_content{
    display: flex;
    flex-direction: row;
    align-items: flex-end;
  }

  .all_text{
    font-size: 15px;
    font-weight: 400;
    color: rgba(26, 26, 30, 0.3);
  }

  .icon {
    margin-left: 2.5px;
    font-size: 15px;
    color: rgba(42, 42, 54, 0.3);
  }
  .product_list{
    overflow-x: auto;
    display: flex;
    flex-direction: row;
    /* width: 710px; */
    height: 180px;
    margin-top: 10px;
    /* margin-bottom: 10px;  */
  }
  .product_item{
    display: flex;
    flex-direction: column;
    margin-right: 10px;
    width: 115px;
  }
  .product_img{
    height: 115px;
    width: 115px;
    border-radius: 8px;
  }
  .product_info_conteny{
    display: flex;
    flex-direction: column;
    margin-top: 5px;
  }
  .product_name_content{
    width: 115px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    /* height: 30px; */

  }
  .product_name{
    font-size: 14px;
    width: 115px;
  }
  .product_money_content{
    display: flex;
    margin-top: 5px;
    flex-direction: row;

  }
  .subsidy_content{
    padding-top: 2.5px;
    padding-bottom: 2.5px;
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #d03629;
    border-radius: 2.5px;
  }

  .hidden_content{
    overflow: hidden;
    display: flex;
    flex-direction: row;
    height: 177.5px;
    margin-bottom: 5px;
  }
</style>
